<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件访问修饰符</title>
	</head>
	<body>
		<div id="app">
			<h1>数值:{{num}}</h1>
			<!-- 1.stop :阻止事件冒泡 
			       由于嵌套的的关系，事件会冒泡向上执行方法
			-->
			<div @click="add1">
				<button @click="add2">冒泡自增</button>
				<button @click.stop="add2">阻止冒泡</button>
			</div>
			<hr >
			<!-- 2.阻止默认行为  编辑表单 提交属性username password-->
			<!-- 2.2需求：只执行login方法，不执行action的动作使用prevent命名，阻止默认action
			 -->
			<form action="http://baidu.com" method="">
				<input name="username" type="text" />
				<input name="password" type="password" />
				<button type="submit" @click="login">提交</button>
			</form>
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		
		<script type="text/javascript">
			const app = new Vue({
			
				el: '#app',
				data: {
					num: 1
				},
				// 定义vue对象的方法
				methods: {
			     add1(){
					 this.num++
				 },
				 add2(){
					 this.num++
				 },
				 login(){
					 alert("实现ajax的数据提交")
				 }
				}
			
			})
			
			
			
		</script>
	</body>
</html>
